<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{background-color:black;}
</style>
<body>
    <div class="xuetiao" style="width:100px;height:50px; background-color: aliceblue;">
    <div class="xue" style="width:100px;height:50px; background-color: red;"></div>
    </div>
</body>
<script>
    // 1 写定时器
    setInterval(function() {

        // 血条-1
        
        // var xue = parseInt(document.querySelector('.xue').style.width)
        // document.querySelector('.xue').style.width = xue-1
        // 造星
        var imgObj = document.createElement('img')
        imgObj.src='./img/star.gif'
        // 随机宽高
        var min = 20
        var max = 40
        var temp=Math.floor(Math.random()*(max-min+1)+min)
        imgObj.width = temp
        // 随机位置
        var minLeft=20
        var maxLeft=(window.innerWidth || document.documentElement.clientWidth)-temp
        var left=Math.floor(Math.random()*(maxLeft-minLeft+1)+minLeft)
        var minTop=0
        var maxTop=(window.innerHeight || document.documentElement.clientHeight)-temp
        var top=Math.floor(Math.random()*(maxTop-minTop+1)+minTop)
        imgObj.style.position = 'absolute'
        imgObj.style.left = left+'px'
        imgObj.style.top = top+'px'
        // 追加到页面
        document.body.appendChild(imgObj)
    } ,1000)

    // 点击删除星星
    // 1获取body并绑定点击事件
    document.body.onclick = function(evt){
        var e = evt || window.event
        var target = e.target || e.srcElement
        console.log(target)
        if(target.nodeName === 'IMG'){
            document.body.removeChild(target)
            var xue = parseInt(document.querySelector('.xue').style.width)
            document.querySelector('.xue').style.width = xue+1+ 'px'
    
        }
        
    }
    setInterval(function() {

    // 血条-1

    var xue = parseInt(document.querySelector('.xue').style.width)
    document.querySelector('.xue').style.width = xue-1+ 'px'
    },1000)
</script>